<div style="margin-top:15px;" v-if="status">

	<!-- 掉线警告 -->
	<a-alert v-if="!status.connect" message="警告" description="屏幕掉线啦！！！"
		type="warning" showIcon style="margin-bottom:15px;"
	></a-alert>

	<a-row :gutter="24" v-if="mode == 'edit' || mode == 'read'">
		<a-col :span="8">
			<a-button-group>
				<a-button @click="btnModeSort" >排序</a-button>
				<a-button @click="btnCreate" >新建</a-button>
			</a-button-group>
			<br/><br/>

			<a-timeline style="padding-left:8px;">
				<a-timeline-item v-for="(id,index) in order" :key="id"
						:style="(editId==id||mode=='read')?{}:{opacity:0.4}"
						:color="currentIndex==index?'green':'blue'">
					<div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">{{pluginName(id)}}</div>
					<a-tag :color="pluginColor(id)">{{ tagName(id) }}</a-tag>
					<a-button type="link" @click="btnTagEdit(id)">修改</a-button>
					<a-icon slot="dot" type="play-circle" style="font-size: 16px;" v-if="currentIndex==index"/>
				</a-timeline-item>
			</a-timeline>
		</a-col>
		<a-col :span="15" :offset="1" v-if="mode == 'edit'" >
			<a-page-header
				style="border: 1px solid rgb(235, 237, 240)"
				@back="btnModeRead()"
				:title="editId == 0 ? '创建新标签' : '修改标签'"
			>
			</a-page-header>
			<a-card>
				<a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
					<a-form-item label="类型">
						<a-select default-value="" v-model="editType">
							<a-select-option :value="n.type" :key="n.type" v-for="n in names"
								>{{n.name}}</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item label="标题" v-if="metas[editType] && metas[editType].title">
						<a-input v-model.trim="editTitle"></a-input>
					</a-form-item>
					<a-form-item label="内容" v-if="metas[editType] && metas[editType].content">
						<a-textarea v-model.trim="editContent" rows="5"></a-textarea>
					</a-form-item>
					<a-form-item label="时长" v-if="metas[editType] && metas[editType].duration">
						<a-input v-model.number="editDuration" type="number" :min="metas[editType].duration.min || 0"></a-input>
					</a-form-item>

					<a-form-item :wrapper-col="{ span: 16, offset: 4 }" style="margin-bottom:6px;">
						<a-button-group>
							<a-button key="save" type="primary" :disabled="editType == ''" @click="btnEditOrCreate">
								{{editId == 0 ? '创建' : '修改'}}
							</a-button>
							<a-button key="back" @click="btnModeRead">取消</a-button>
							<a-button type="danger" @click="btnRemove" v-if="editId!=0">删除</a-button>
						</a-button-group>
					</a-form-item>
				</a-form>
			</a-card>
		</a-col>
	</a-row>

	<!-- 排序模式 -->
	<a-row :gutter="24" v-if="mode == 'sort'">
		<a-col :span="24">
			<a-page-header
				style="border: 1px solid rgb(235, 237, 240)"
				@back="btnModeRead"
				title="标签排序"
			>
				<template slot="extra">
					<a-button key="back" @click="btnModeRead">返回</a-button>
				</template>
			</a-page-header>
			<br/>
			<a-timeline style="margin-left:8px;margin-right:2px;">
				<a-timeline-item v-for="(id,index) in order" :key="id">
					<div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">
						<a-button-group size="small">
							<a-button :disabled="index == 0"                @click="btnUpper(index)" >上移</a-button>
							<a-button :disabled="index == order.length - 1" @click="btnLower(index)" >下移</a-button>
						</a-button-group>
						<a-tag :color="pluginColor(id)">{{ tagName(id) }}</a-tag>
						{{ pluginName(id) }}
					</div>
				</a-timeline-item>
			</a-timeline>
		</a-col>
	</a-row>
</div>




